<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title id="t1">12-watch实现计数器</title>
</head>

<body>

	<div id="app1" class="capp1">
		<button @click="sub">-</button>
		<span>{{ num }}</span>
		<button @click="add">+</button>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var data = { num: 1 }
		// new Vue({}) 大小写敏感
		var app = new Vue({
			el: "#app1",
			data: data,
			methods: {
				add: function () {
					if (this.num < 10) {
						this.num++
					}
				},
				sub: function () {
					if (this.num > 0) {
						this.num--
					}
				}
			}
		})

		app.$watch('num',function(nval,oval){
			console.log("计数器变化：" + oval + "~" + nval)
		})
	</script>

</body>

</html>